<template>
  <div>

  <div style=" margin-bottom:30px;text-align:center;">
  <el-input suffix-icon="el-icon-search" v-model="activity.title" style="width:200px;" placeholder="请输入活动主题" size="medium"></el-input>
  <el-button @click="search" style="margin-left:10px" type="primary" size="medium">搜索</el-button>
  <el-button @click="reset" style="margin-left:10px" type="danger" size="medium">重置</el-button>
  </div>
  <div style="float:left;">
          <el-button type="success" size="medium" @click="handleAdd" style="margin-right:10px">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
          <el-popconfirm
              class="ml-5"
              confirm-button-text='确定'
              cancel-button-text='我再想想'
              icon="el-icon-info"
              icon-color="red"
              title="您确定批量删除这些数据吗？"
              @confirm="delBatch()"
          >
            <el-button type="danger" size="medium" slot="reference">批量删除 <i class="el-icon-delete-solid"></i></el-button>
          </el-popconfirm>
  </div>

  <el-drawer
    title="增加活动信息"
    :visible.sync="drawer"
    :with-header="false">
    <h1>新增活动信息</h1>
    <el-form :rules="rules" :model="add"  ref="add" style="text-align:left;padding-left:40px">
      <el-form-item prop="title" label="活动标题" class="div">
        <el-input style="width:200px" v-model="add.title" size="medium"></el-input>
      </el-form-item>
      <el-form-item prop="actDescribe" label="活动描述" class="div">
        <el-input type="textarea" style="width:200px" v-model="add.actDescribe" size="medium" :rows="5"></el-input>
      </el-form-item>
      <el-form-item prop="actStartTime" label="开始时间">
        <el-col :span="11">
          <el-date-picker  :picker-options="pickerOptionsStart" type="date" placeholder="选择日期" v-model="add.actStartTime" style="width: 200px;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item prop="actEndTime" label="结束时间">
        <el-col :span="11">
          <el-date-picker :picker-options="pickerOptionsEnd" type="date" placeholder="选择日期" v-model="add.actEndTime" style="width: 200px;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item style="text-align:center;margin-top:40px">
        <el-button size="medium" type="primary" @click="addAdmin('add')">提交</el-button>
      </el-form-item>
     </el-form>

  </el-drawer>
   <el-table
      :data="tableData"
      v-loading="loading"
      stripe
      style="width: 100%"
      tooltip-effect="dark"
      @selection-change="handleSelectionChange"
      >
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="id"
        label="活动编号"
        >
      </el-table-column>
      <el-table-column
        prop="title"
        label="活动标题"
        >
      </el-table-column>
      <el-table-column
        prop="actDescribe"
        label="活动描述"
        >
      </el-table-column>
      <el-table-column
        prop="actStartTime"
        label="活动开始时间"
        :formatter="formatTime1"
        width="180">
      </el-table-column>
      <el-table-column
        prop="actEndTime"
        label="活动结束时间"
        :formatter="formatTime2"
        width="180">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
       >
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row.id)" type="text" size="small">编辑</el-button>
        <el-popconfirm
    confirm-button-text='确定'
    cancel-button-text='取消'
    icon="el-icon-info"
    icon-color="red"
    title="确定删除这段内容吗？"
    @confirm="deleteById(scope.row.id)"
  >
    <el-button slot="reference" type="text"  style="margin-left:10px">删除</el-button>
  </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-empty :image-size="200" v-if="flag==false"></el-empty>
    <el-dialog  title="修改活动信息" style="text-align:left" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item hidden>
        <el-input v-model="form.id" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="活动标题" style="width:200px;">
        <el-input v-model="form.title" disabled autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="活动描述"  style="width:200px;">
       <el-input type="textarea" v-model="form.actDescribe" autocomplete="off" :rows="4"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="back()">取 消</el-button>
      <el-button type="primary" @click="updateAdmin()">确 定</el-button>
    </div>
  </el-dialog>
   <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
  </div>
  </template>

<script>
import moment from 'moment'
export default {
  name: 'ActivityView',
  data () {
    return {
      pickerOptionsStart: {
        disabledDate: time => {
          if (this.add.actStartTime) {
            return time.getTime() > new Date(this.add.actEndTime).getTime()
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          return time.getTime() < new Date(this.add.actStartTime).getTime()
        }
      },
      drawer: false,
      flag: false,
      tableData: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      activity: {
        title: ''
      },
      multipleSelection: [],
      dialogFormVisible: false,
      loading: true,
      form: {
        id: '',
        title: '',
        actDescribe: ''
      },
      add: {
        title: '',
        actDescribe: '',
        actStartTime: '',
        actEndTime: ''
      },
      rules: {
        title: [
          { required: true, message: '活动名称不能为空', trigger: 'blur' }
        ],
        actStartTime: [
          { required: true, message: '请填写起始时间', trigger: 'blur' }
        ],
        actEndTime: [
          { required: true, message: '请填写结束时间', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 格式化时间
    formatTime1 (row, column) {
      const date = row[column.property]
      if (date === undefined) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD')
    },
    formatTime2 (row, column) {
      const date = row[column.property]
      if (date === undefined) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD')
    },
    delBatch () {
      const ids = this.multipleSelection.map(v => v.id)
      this.request.post('/activity/delAll', ids).then(res => {
        if (res.code === '200') {
          this.$message({
            showClose: true,
            type: 'success',
            message: '操作成功'
          })
          this.loadGet()
        } else {
          this.$message({
            showClose: true,
            type: 'error',
            message: '网络异常,操作失败'
          })
        }
      })
    },
    deleteById (id) {
      this.request.post('/activity/deleteById/' + id).then(res => {
        if (res.code === '200') {
          this.loadGet()
          this.$message({
            showClose: true,
            message: '操作成功',
            type: 'success'
          })
        } else {
          this.$message({
            showClose: true,
            message: '操作失败',
            type: 'error'
          })
        }
      })
    },
    addAdmin (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.request.post('/activity/save', this.add).then(res => {
            if (res.code === '200') {
              this.$message.success('操作成功')
              this.loadGet()
              this.add.title = ''
              this.add.actDescribe = ''
              this.add.actStartTime = ''
              this.add.actEndTime = ''
            } else {
              this.$$message.danger('网络异常，新增失败')
            }
          })
          this.drawer = false
        } else {
          this.$message.error('请填写完整')
        }
      })
    },
    // 打开新增页面
    handleAdd () {
      this.drawer = true
    },
    back () {
      this.form.id = ''
      this.form.title = ''
      this.form.actDescribe = ''
      this.dialogFormVisible = false
    },
    async updateAdmin () {
      const user = {
        title: this.form.title,
        actDescribe: this.form.actDescribe,
        id: this.form.id
      }
      this.request.post('/activity/updateActDescribe', user).then(res => {
        if (res.code === '200') {
          this.loadGet()
          this.dialogFormVisible = false
          this.$message.success('操作成功')
        } else {
          this.$message.danger('网络异常，修改失败')
        }
      })
    },
    handleDelete (id) {
      this.request.post('/activity/deleteById/' + id).then(res => {
        if (res.code === '200') {
          console.log(id)
          this.loadGet()
          this.dialogFormVisible = false
          this.$message.success('操作成功')
        } else {
          this.$message.danger('网络异常，修改失败')
        }
      })
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    reset () {
      this.title = ''
      this.loadGet()
    },
    search () {
      this.loadGet()
    },
    handleClick (id) {
      this.form.id = id
      this.request.post('/activity/queryById' + '/' + id
      ).then(res => {
        if (res.code === '200') {
          this.form = res.data
        } else {
          this.$message.danger('加载失败')
        }
      })
      this.dialogFormVisible = true
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.loadGet()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.pageNo = val
      this.loadGet()
    },
    async loadGet () {
      this.request.post('/activity/activitylist' + '/' + this.pageNo + '/' + this.pageSize, this.activity.title
      ).then(res => {
        this.flag = true
        this.tableData = res.data.list
        this.total = res.data.total
        this.loading = false
      })
    }
  },
  mounted () {
    this.loadGet()
  }
}
</script>

  <style>
  .div{
    margin-top:40px;
    margin-bottom: 20px;
  }
  </style>
